<script>
import io from "socket.io-client";
export default {
  data() {
    return {
      // 输入框中的内容
      msg: '',
      // 聊天的数组
      chatList: [
        { isme: false, t: '你好啊！' },
        // { isme: true, t: '你好！' }
      ],
      // 创建一个 socket 对象
      socket: null
    }
  },
  methods: {
    // 1.0 点击右侧的提交按钮时会触发
    // 2.0 在输入框中点击回车按钮会触发
    onSearch() {
      // 点击之后将输入框中的内容添加到 chatList 中
      if (this.msg) {
        // 将消息发送到服务器
        this.socket.emit('message', {
          msg: this.msg,
          timestamp: Date.now()
        })
        this.chatList.push({
          isme: true,
          t: this.msg
        })
        this.msg = ''
        this.$nextTick(() => {
          // 滚动到最后面
          this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
        })
      }
    }
  },
  created() {
    // 建立服务器的连接
    this.socket = io('http://toutiao.itheima.net', {
      query: {
        token: this.$store.state.token.token
      },
      transports: ['websocket']
    })
    // 收消息
    this.socket.on('message', data => {
      // 将内容添加到聊天列表中
      this.chatList.push({
        isme: false,
        t: data.msg
      })
      // 自动滚动到底部
      this.$nextTick(() => {
        // 滚动到最后面
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight
      })
    })
  }
}
</script>

<template>
  <div class="zhi">
    <!-- 顶部导航 -->
    <van-nav-bar title="小智同学" left-arrow @click-left="$router.back()" />
    <!-- 聊天区域 -->
    <div class="chat" ref="chat">
      <div class="item" v-for="(item, index) in chatList" :key="index">
        <van-image
          class="img"
          :class="{ right: item.isme }"
          round
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        ></van-image>
        <div class="con" :class="{ right: item.isme }">
          {{ item.t }}
        </div>
      </div>
    </div>
    <!-- 输入框区域 -->
    <van-search
      class="input"
      v-model="msg"
      show-action
      left-icon=""
      placeholder="说点什么"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">提交</div>
      </template>
    </van-search>
  </div>
</template>

<style lang="less">
.zhi {
  font-size: 16px;
  .chat {
    position: fixed;
    top: 46px;
    bottom: 54px;
    left: 0px;
    right: 0px;
    // background-color: #eee;
    background-color: #f7cfba;
    overflow: auto;
    .item {
      overflow: hidden;
      margin: 10px;
      .img {
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        &.right {
          float: right;
          margin-right: 0px;
          margin-left: 10px;
        }
      }
      .con {
        float: left;
        border: 1px solid #3196fa;
        max-width: 70%;
        padding: 10px;
        background-color: #e0effb;
        &.right {
          float: right;
          border: 1px solid #c5e2d4;
          background-color: #9eea6a;
        }
      }
    }
  }
  .input {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 10px;
  }
}
</style>
